<template>
<div>
  <Modal v-model="detailModal" title="人员信息详情" width="1350">
    <div class="body">
<!--      {{ModuleInfo}}-->
      <div style="width:400px;" class="fl">
        <div class="danyuan">
          <div :class="{clickDanyuan:pickUnit===item.id}" v-for="(item, index) in unit_list" :key="index" class="fl text-center ml10" @click="pickUnitInfo(item)">
            {{item.title}}
          </div>
        </div>
        <div class="lou mt5">
          <div v-if="leftShow" style="width: 100%;padding-left: 45%;padding-top: 45%">
            <Spin size="large"></Spin>
          </div>
          <div v-else>
            <template>
              <Row v-for="(item, index) in floor_list" :key="index" style="background-color: #fff; position: relative;min-height: 75px;" class="mt10">
                <div class="fl mr10 ceng">{{item.title}}F</div>
                <div class="fl hulist">
                  <template>
                    <div :class="{clickHu:pickDoorplate===item1.id}" class="fl mr5" v-for="(item1, index1) in item.children" :key="index1" @click="pickDoorplateInfo(item1)">
                      <span v-if="ModuleInfo.moduleInfo.identification === 'ym'">
                        <span v-if="item1.jz_num > 0 && item1.people_num > 0 && item1.jz_num < item1.people_num" style="line-height:16px">
                          <span>
                            <img :src="ModuleInfo.moduleInfo.img2" alt="" style="width:30%">
                          </span>
                          <span>
                            {{item.title}}F-{{item1.title}}
                          </span>
                        </span>
                        <span v-if="item1.jz_num > 0 && item1.people_num > 0 && item1.jz_num == item1.people_num" style="line-height:16px">
                          <span>
                            <img :src="ModuleInfo.moduleInfo.img1" alt="" style="width:30%">
                          </span>
                          <span>
                            {{item.title}}F-{{item1.title}}
                          </span>
                        </span>
                        <span v-if="item1.jz_num == 0 && item1.people_num == 0">
                          {{item.title}}F-{{item1.title}}
                        </span>
                        <span v-if="item1.jz_num == 0 && item1.people_num > 0">
                          {{item.title}}F-{{item1.title}}
                        </span>
                        <span v-if="item1.jz_num > 0 && item1.people_num > 0 && item1.jz_num > item1.people_num ">
                          {{item.title}}F-{{item1.title}}
                        </span>
                      </span>
                      <span v-else>
                        <img v-if="item1.module === '1'" :src="ModuleInfo.moduleInfo.img1" style="width:30%">
                        {{item.title}}F-{{item1.title}}
                      </span>
                    </div>
                  </template>
                </div>
              </Row>
            </template>
          </div>
        </div>
      </div>
      <div v-if="tableShow" class="TableClass">
        <template>
          <Table :columns="tableColumns" :data="tableData" :loading="tableLoading">
            <template slot-scope="{ row, index }" slot="cardno">
              {{row.cardno.substring(0,6)+'********'+row.cardno.substring(14,18)}}
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" size="small" style="margin-right: 5px" @click="detailUserInfo(row)">详情</Button>
            </template>
          </Table>
        </template>
      </div>
      <div v-else class="fl info">
        <div class="info_list">
          <div class="info_list_title">
            <div>
              本户人口
            </div>
          </div>
          <div class="header" style="margin-top: 20px">
            <div class="info_list_content">
              <div v-for="(item, index) in doorplate_list" :key="index">
                <div :class="{clickPerson:pickUser===item.id}" style="height: inherit" class="fl person mb10"
                     @click="pickUserInfo(item)">
                  <div style="text-align: right">
                    <Button @click="deleteDoorplatePeople(item)" shape="circle" icon="md-close" size="small"></Button>
                  </div>
                  <Row>
                    <!--      年龄，性别图标             -->
                    <Col span="5" offset="1" style="text-align: left;">
                      <i class='iconfont icon-xiaonanhai' v-if="item.sex == '男' && item.age < 18"></i>
                      <i class='iconfont icon-weibiaoti--' v-if="item.sex == '男' && item.age > 60"></i>
                      <i class='iconfont icon-nanshi1' v-if="item.sex == '男' && item.age >= 18 && item.age <= 60"></i>
                      <i class='iconfont icon-grandma' v-if="item.sex == '女' && item.age > 60"></i>
                      <i class='iconfont icon-iconnvhai' v-if="item.sex == '女' && item.age < 18"></i>
                      <i class='iconfont icon-icon-test' v-if="item.sex == '女' && item.age >= 18 && item.age <= 60"></i>
                    </Col>
                    <!--      人员标签图标            -->
                    <Col span="4" style="text-align: left;">
                    <span v-if="ModuleInfo.moduleInfo.identification === 'ym'">
                      <img v-if="item.jz_num >= 2" :src="ModuleInfo.moduleInfo.img1" class="imgClass">
                      <i v-if="item.jz_num == 1" class='iconfont icon-yimiao1' style="color:mediumseagreen"></i>
                    </span>
                      <span v-else>
                      <img v-if="item.module === '1'" :src="ModuleInfo.moduleInfo.img1" class="imgClass">
                    </span>
                    </Col>
                  </Row>
                  <Row class="mb5">
                    <Col span="7" class="ivu-form-item-label">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</Col>
                    <Col span="7" class="ivu-form-item-label title-align">{{item.user_name}}</Col>
                  </Row>
                  <Row class="mb5">
                    <Col span="7" class="ivu-form-item-label">身份证：</Col>
                    <Col span="17" class="ivu-form-item-label title-align">{{item.cardno.substring(0,6)+'********'+item.cardno.substring(14,18)}}</Col>
                  </Row>
                  <Row class="mb5">
                    <Col span="7" class="ivu-form-item-label">电&nbsp;&nbsp;&nbsp;&nbsp;话：</Col>
                    <Col span="17" class="ivu-form-item-label title-align">{{item.mobile}}</Col>
                  </Row>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="info_list_title" v-if="currentPerson !== ''">个人信息表</div>
          <div class="wk">
            <div class="img1 b_top_left">
              <img class="img2" :src="currentPerson.photo || nophoto">
            </div>
            <div class="w90 b_top_left td1">姓名</div>
            <div class="w165 b_top_left ti">{{currentPerson.name}}</div>
            <div class="w90 b_top_left td1">性别</div>
            <div class="w105 b_top_left ti">{{currentPerson.sex}}</div>
            <div class="w90 b_top_left td1">民族</div>
            <div class="w135 b_bottom ti">{{currentPerson.folk}}</div>
            <div class="w90 b_bottom_right td1">身份证号</div>
            <div class="w165 b_bottom_right ti">{{currentPerson.TMcardno}}</div>
            <div class="w90 b_top_left td1">政治面貌</div>
            <div class="w105 b_top_left ti">{{currentPerson.political_outlook}}</div>
            <div class="w90 b_bottom_right td1">居住情况</div>
            <div class="w135 b_bottom ti">{{currentPerson.living_condition}}</div>
            <div class="w90 b_bottom_right td1">住址</div>
            <div class="w585 b_bottom ti">{{currentPerson.present_address}}</div>
            <div class="w90 b_bottom_right td1">户籍地址</div>
            <div class="w585 b_bottom ti">{{currentPerson.register_address}}</div>
            <div class="w135 b_bottom_right td1">联系方式</div>
            <div class="w190 b_bottom_right ti">{{currentPerson.mobile}}</div>
            <div class="w90 b_bottom_right td1">现住地址</div>
            <div class="w395 b_bottom ti">{{currentPerson.present_address}}</div>
            <div class="w135 b_bottom_right td1">职业</div>
            <div class="w190 b_bottom_right ti">{{currentPerson.occupation}}</div>
            <div class="w90 b_bottom_right td1">银行卡收入情况</div>
            <div class="w105 b_bottom_right ti">{{currentPerson.personal_income}}</div>
            <div class="w120 b_bottom_right td1">工作单位</div>
            <div class="w170 b_bottom ti">{{currentPerson.work_unit}}</div>
            <div class="w135 b_bottom_right td1">文化程度</div>
            <div class="w190 b_bottom_right ti">{{currentPerson.education}}</div>
            <div class="w90 b_bottom_right td1">婚姻状况</div>
            <div class="w105 b_bottom_right ti">{{currentPerson.marriage}}</div>
            <div class="w120 b_bottom_right td1">生育子女</div>
            <div class="w170 b_bottom ti">{{currentPerson.child}}</div>
            <div class="w135 b_bottom_right td1">兵役情况</div>
            <div class="w190 b_bottom_right ti">{{currentPerson.military}}</div>
            <div class="w90 b_bottom_right td1">国籍</div>
            <div class="w105 b_bottom_right ti">{{currentPerson.register_country}}</div>
            <div class="w120 b_bottom_right td1">户籍-省</div>
            <div class="w170 b_bottom ti">{{currentPerson.register_province}}</div>
            <div class="w135 b_bottom_right td1">户籍-市</div>
            <div class="w190 b_bottom_right ti">{{currentPerson.register_city}}</div>
            <div class="w90 b_bottom_right td1">户籍-区</div>
            <div class="w395 b_bottom ti">{{currentPerson.register_area}}</div>
            <div class="w135 b_bottom_right td1">父亲姓名</div>
            <div class="w190 b_bottom_right ti">{{currentPerson.fq_xm}}</div>
            <div class="w90 b_bottom_right td1">父亲证件类型</div>
            <div class="w105 b_bottom_right ti">{{currentPerson.fq_card_type}}</div>
            <div class="w120 b_bottom_right td1">父亲证件号码</div>
            <div class="w170 b_bottom ti">{{currentPerson.fq_card_no}}</div>
            <div class="w135 b_bottom_right td1">母亲姓名</div>
            <div class="w190 b_bottom_right ti">{{currentPerson.mq_xm}}</div>
            <div class="w90 b_bottom_right td1">母亲证件类型</div>
            <div class="w105 b_bottom_right ti">{{currentPerson.mq_card_type}}</div>
            <div class="w120 b_bottom_right td1">母亲证件号码</div>
            <div class="w170 b_bottom ti">{{currentPerson.mq_card_no}}</div>
            <div class="w135 b_bottom_right td1">标签</div>
            <div class="w675 b_bottom_right_1 ti">{{currentPerson.label}}</div>
            <div class="w135 b_right td1">备注</div>
            <div class="w675 ti">{{peopleLabel}}</div>
          </div>
        </div>
      </div>
    </div>
  </Modal>
  <Modal
    v-model="deleteModal"
    title="删除确认！"
    @on-ok="deleteOk">
      请确认你的操作！删除后将会把此人从本户中移除，数据无法恢复！
  </Modal>
</div>
</template>

<script>
import './index.less'
import {
  findDoorplatePeopleList,
  findFloorDoorplateList,
  findModuleUserList,
  findTreeList,
  getUserInfoByCardNo } from '@/api/eventlist'
import { getProvinceList, getCityList, getAreaList, getSexByeCardNo, getAgeByeCardNo } from '@/api/grid'
import { getDictList } from '@/api/common'
import nophoto from '@/assets/images/nophoto.jpeg'
import { deleteUserGrid, findUserFocusGroupList } from '../../../../api/eventlist'
export default {
  name: 'grid-person-new',
  data () {
    return {
      nophoto,
      deleteModal: false,
      deleteInfo: {},
      detailModal: false,
      ModuleInfo: {},
      leftShow: false,
      tableColumns: [
        {
          title: '姓名',
          key: 'user_name',
          align: 'center'
        },
        {
          title: '身份证号',
          slot: 'cardno',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      tableData: [],
      tableLoading: false,
      tableShow: true,
      unit_list: [],
      floor_list: [],
      doorplate_list: [],
      pickUnit: '',
      pickDoorplate: '',
      pickUser: '',
      currentPerson: {},
      peopleLabel: ''
    }
  },
  methods: {
    // 初始化
    async init (e) {
      this.detailModal = true
      this.ModuleInfo = e
      try {
        let data = {
          grade: '7',
          id: this.ModuleInfo.buildingInfo.id
        }
        // 查询单元，初始化调用层户，异步等待借口返回，获取第一个单元的id
        let result = await findTreeList(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.unit_list = ret.data.data
            return ret.data.data
          } else {
            this.$Notice.error({
              title: '查询失败',
              desc: ret.data.errmsg
            })
          }
        })
        this.pickUnit = result[0].id
        this.pickDoorplate = ''
        this.tableShow = true
        this.findFloorList(result[0].id)
        this.findModuleUserList(result[0].id)
      } catch (err) {
        console.log(err)
      }
    },
    // 查询层
    findFloorList (e) {
      this.leftShow = true
      let data = {
        id: e,
        first_id: this.ModuleInfo.moduleInfo.first_level_id,
        second_id: this.ModuleInfo.moduleInfo.second_level_id
      }
      findFloorDoorplateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.floor_list = ret.data.data
          this.leftShow = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    // 选择单元
    pickUnitInfo (e) {
      this.pickUnit = e.id
      this.pickDoorplate = ''
      this.tableShow = true
      this.findFloorList(e.id)
      this.findModuleUserList(e.id)
    },
    // 选择户
    pickDoorplateInfo (e) {
      this.currentPerson = {}
      this.pickDoorplate = e.id
      this.pickUser = ''
      this.tableShow = false
      this.findDoorplatePeopleList(e.id, 'init')
    },
    // 查询单元人列表
    findModuleUserList (e) {
      this.tableLoading = true
      let data = {
        unit_id: e
      }
      findModuleUserList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
          this.tableLoading = false
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    // 查询户人
    findDoorplatePeopleList (e, e1) {
      let data = {
        doorplate_id: e,
        first_level_id: this.ModuleInfo.moduleInfo.first_level_id,
        second_level_id: this.ModuleInfo.moduleInfo.second_level_id
      }
      findDoorplatePeopleList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.doorplate_list = ret.data.data
          for (var i = 0; i < this.doorplate_list.length; i++) {
            if (this.doorplate_list[i].focus_group_detail) {
              this.doorplate_list[i].zdrq = this.doorplate_list[i].focus_group_detail.split(',')
            }
            this.doorplate_list[i].sex = getSexByeCardNo(this.doorplate_list[i].cardno)
            this.doorplate_list[i].age = getAgeByeCardNo(this.doorplate_list[i].cardno)
          }
          // this.currentPerson = {}
          if (e1 === 'init') {
            this.pickUser = this.doorplate_list[0].id
            this.getUserInfoByCardNo(this.doorplate_list[0])
          }
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    // 从户中选择人
    pickUserInfo (e) {
      this.pickUser = e.id
      this.getUserInfoByCardNo(e)
    },
    // 根据身份证号差人
    getUserInfoByCardNo (e) {
      let data = {
        cardno: e.cardno
      }
      getUserInfoByCardNo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.getDicInfo(this.currentPerson.fq_card_type, 'fq')
          this.getDicInfo(this.currentPerson.mq_card_type, 'mq')
          this.getDicInfo(this.currentPerson.po_card_type, 'po')
          this.getProvinceInfo(this.currentPerson.register_province)
          this.findUserFocusGroupList(data)
          this.currentPerson = ret.data.data
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    // 列表详情
    detailUserInfo (e) {
      this.pickUnit = e.unit_id
      this.pickDoorplate = e.doorplate_id
      this.pickUser = e.id
      this.tableShow = false
      this.findFloorList(e.unit_id)
      this.findDoorplatePeopleList(e.doorplate_id, 'pick')
      this.getUserInfoByCardNo(e)
    },
    // 删除
    deleteDoorplatePeople (e) {
      this.deleteInfo = e
      this.deleteModal = true
      console.log(this.deleteInfo)
    },
    // 删除确认
    deleteOk () {
      deleteUserGrid(this.deleteInfo).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '删除成功！',
            desc: ret.data.errmsg
          })
          this.findDoorplatePeopleList(this.pickDoorplate, 'pick')
        } else {
          this.$Notice.error({
            title: '删除失败！',
            desc: ret.data.errmsg
          })
        }
      })
    },
    // 获取字典数据
    getDicInfo (value, str) { // 证件类型
      getDictList({ 'type': 'csc_squser_cardtype' }).then(ret => {
        if (ret.data.errcode === 0) {
          this.dicList = ret.data.data.results
          for (var i = 0; i < this.dicList.length; i++) {
            if (str === 'fq') {
              if (value === this.dicList[i].value) {
                this.currentPerson.fq_card_type = this.dicList[i].label
              }
            } else if (str === 'mq') {
              if (value === this.dicList[i].value) {
                this.currentPerson.mq_card_type = this.dicList[i].label
              }
            } else if (str === 'po') {
              if (value === this.dicList[i].value) {
                this.currentPerson.po_card_type = this.dicList[i].label
              }
            }
          }
        } else {
          this.$Notice.error({ title: '获取字典列表失败', desc: '' })
        }
      })
    },
    getProvinceInfo (value) {
      getProvinceList({}).then(res => {
        if (res.data.errcode === 0) {
          for (var i = 0; i < res.data.data.length; i++) {
            if (value === res.data.data[i].province_code) {
              this.getCityInfo(value, this.currentPerson.register_city)
              this.getAreaInfo(this.currentPerson.register_city, this.currentPerson.register_area)
              this.currentPerson.register_province = res.data.data[i].province_name
            }
          }
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    getCityInfo (code, value) {
      getCityList({ province_code: code }).then(res => {
        if (res.data.errcode === 0) {
          for (var i = 0; i < res.data.data.length; i++) {
            if (value === res.data.data[i].city_code) {
              this.currentPerson.register_city = res.data.data[i].city_name
            }
          }
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    getAreaInfo (code, value) {
      getAreaList({ city_code: code }).then(res => {
        if (res.data.errcode === 0) {
          for (var i = 0; i < res.data.data.length; i++) {
            if (value === res.data.data[i].area_code) {
              this.currentPerson.register_area = res.data.data[i].area_name
            }
          }
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    },
    findUserFocusGroupList (e) {
      let data = {
        cardno: e.cardno
      }
      findUserFocusGroupList(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          // eslint-disable-next-line no-unused-vars
          let list = ''
          result.forEach(item => {
            list = list + item.first_level_label + '-' + item.second_level_label + ' '
          })
          this.peopleLabel = list
        } else {
          this.$Notice.error({ title: '失败', desc: res.data.errmsg })
        }
      })
    }
  }
}
</script>

<style scoped>

/deep/ ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(255,255,255,0.93);
}

/deep/ ::-webkit-scrollbar-thumb {
  border-radius:5px;
  -webkit-box-shadow: inset 0 0 6px rgba(250, 250, 250, .3);
  background-color: rgba(220,220,220,0.93);
}

/deep/ ::-webkit-scrollbar-corner {
  background-color: rgba(255,255,255,0.93);
}

.danyuan {
  height: 75px;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  background-color: #fff;
}

.danyuan div {
  width: 80px;
  height: 40px;
  margin-top: 13px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 20px;
  background-color: #F3F4F6;
  color: #939393;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

/*改变后单元样式*/
.clickDanyuan {
  background-color: #FFF0D3 !important;
  color: #EB9F15 !important;
}

.clickHu {
  background-color: #FFF0D3 !important;
  color: #EB9F15 !important;
}

.clickPerson {
  background-color: #EBF1FD !important;
  color: #5772E8 !important;
}

.lou {
  height: 600px;
  overflow-y: auto
}

.ceng {
  width: 70px;
  height: 50px;
  text-align: center;
  border-radius: 15px;
  background-color: #D5E4FC;
  font-size: 20px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  color: #5571E6;
  margin: auto;
  top: 0;
  left: 10px;
  bottom: 0;
  line-height: 30px;
  position: absolute;
}

.hu {
  width: 85px;
  height: 50px;
  text-align: center;
  border: 1px solid #FF9900;
  background-color: #F3F4F6;
  cursor: pointer;
  margin-bottom: 5px;
  line-height: 30px;
  color: #939393;
  font-weight: bold;
}
.bg{
  border: 1px solid #FF9900;
}
.hulist {
  margin-left: 75px;
  width: 300px;
}

.person {
  width: 200px;
  background-color: #F3F4F6;
  height: 120px;
  text-align: center;
  padding-top: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

.info {
  width: 850px;
}

.info_list {
  width: 860px;
  height: auto;
  padding: 10px;
  background-color: #fff;
}
.info_list_title {
  width: 900px;
  height: 20px;
  line-height: 20px;
  font-size: large;
  margin-bottom: 10px;
}
.header {
  height: auto;
  width: 850px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.info_list_content {
  display: flex;
}

.fl {
  float: left;
  padding: 10px;
}

.text-center {
  text-align: center;
}

.ml10 {
  margin-left: 10px;
}

.mr10 {
  margin-right: 10px;
  /* margin-bottom: 3px; */
}
.mb10 {
  margin-right: 10px;
  margin-bottom: 3px;
}
.mr5 {
  margin-right: 5px;
  width: 85px;
  height: 50px;
  text-align: center;
  /*border: 1px solid #000;*/
  background-color: #F3F4F6;
  cursor: pointer;
  margin-bottom: 5px;
  line-height: 30px;
  color: #939393;
  font-weight: bold;
}
.mr6 {
  margin-right: 5px;
  width: 85px;
  height: 50px;
  text-align: center;
  /*border: 1px solid #000;*/
  background-color: #F3F4F6;
  cursor: pointer;
  margin-bottom: 5px;
  line-height: 17px;
  color: #939393;
  font-weight: bold;
}
.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}
.mb5 {
  margin-bottom: 5px;
}
.content {
  height: 630px;
  width: 860px;
  background-color: #fff;
  padding: 10px;
  margin-top: 15px;
}
.info_list_content .iconfont {
  font-family: "iconfont" !important;
  font-size: 27px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.title-align {
  text-align: left;
}
.zd-tag {
  height: 15px;
  width: 40px;
  line-height: 16px;
  font-size: 12px;
}
.TableClass{
  height: 800px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 10px;
}
.body >>> .ivu-spin-fix .ivu-spin-main{
  top: 23%
}
.body{
  height: 870px;
  background-color: #F8F9FE;
}
.imgClass{
  width:90%;
  margin-top: 18%;
}
</style>
